<template>
  <div class="guide-wrapper">
    <!-- 帮助按钮 -->
    <a-button
      type="default"
      size="small"
      @click="showGuide"
      class="guide-button"
      :title="title"
    >
      <template #icon>
        <IconifyIcon icon="ant-design:question-circle-outlined" />
      </template>
    </a-button>

    <!-- 帮助内容抽屉 -->
    <a-drawer
      v-model:open="guideVisible"
      :title="title"
      width="800px"
      placement="right"
      :body-style="{ padding: '0' }"
      @close="hideGuide"
    >
      <div class="guide-content">
        <component :is="guideComponent" />
      </div>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  guideType:
    | 'status-management'
    | 'property-management'
    | 'capability-management'
    | 'trading-management'
    | 'behavior-management'
    | 'event-management'
    | 'data-reference';
  title?: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: '使用指南',
});

// 响应式数据
const guideVisible = ref(false);

// 动态加载帮助组件
const guideComponent = defineAsyncComponent(() => {
  switch (props.guideType) {
    case 'status-management':
      return import('./StatusManagementGuide.vue');
    case 'property-management':
      return import('./PropertyManagementGuide.vue');
    case 'capability-management':
      return import('./CapabilityManagementGuide.vue');
    case 'trading-management':
      return import('./TradingManagementGuide.vue');
    case 'behavior-management':
      return import('./BehaviorManagementGuide.vue');
    case 'event-management':
      return import('./EventManagementGuide.vue');
    case 'data-reference':
      return import('./DataReferenceGuide.vue');
    default:
      return import('./StatusManagementGuide.vue');
  }
});

// 方法
const showGuide = () => {
  guideVisible.value = true;
};

const hideGuide = () => {
  guideVisible.value = false;
};
</script>

<style lang="less" scoped>
.guide-wrapper {
  .guide-button {
    border: none;
    // 使用默认按钮样式，与其他操作按钮保持一致
    // 不需要特殊样式，让Ant Design的默认样式生效
  }

  .guide-content {
    height: 100%;
    overflow-y: auto;
    padding: 16px;
  }
}
</style>
